<template>
  <div class="form-show">
    <!-- 单行文本 数字 手机-->
    <div
      v-if="['input', 'number', 'amount', 'phone'].includes(formItem.type)"
      class="flex-between"
    >
      <span :class="{ 'item-required': formItem.setting.required }">
        {{ formItem.setting.name }}
        <!-- 单位 -->
        {{ formItem.setting.unit ? `（${formItem.setting.unit}）` : "" }}
      </span>
      <span class="placeholder">
        {{ formItem.setting.placeholder }}
      </span>
    </div>
    <!-- 多行文本 -->
    <div v-if="formItem.type == 'textarea'">
      <div :class="{ 'item-required': formItem.setting.required }">
        {{ formItem.setting.name }}
      </div>
      <div class="placeholder" style="height: 60px">
        {{ formItem.setting.placeholder }}
      </div>
    </div>
    <!-- 说明 -->
    <div v-if="formItem.type == 'tips'" style="line-height: 24px; color: #777">
      {{ formItem.setting.placeholder }}
    </div>
    <!-- 选择框 -->
    <div
      v-if="['radio', 'check', 'date', 'time'].includes(formItem.type)"
      class="flex-between"
    >
      <span :class="{ 'item-required': formItem.setting.required }">
        {{ formItem.setting.name }}
      </span>
      <div class="placeholder">
        <span>{{ formItem.setting.placeholder }}</span>
        <RightOutlined />
      </div>
    </div>
    <!-- 日期范围 -->
    <template v-if="formItem.type == 'daterange'">
      <div
        class="flex-between combine-item"
        v-for="(name, i) of formItem.setting.name"
        :key="i"
      >
        <span
          :class="{
            'item-required': formItem.setting.required,
          }"
        >
          {{ name + (i == formItem.setting.name.length - 1 ? "（天）" : "") }}
        </span>
        <div class="placeholder">
          <template v-if="i < formItem.setting.name.length - 1">
            <span>
              {{ formItem.setting.placeholder }}
            </span>
            <RightOutlined />
          </template>
          <span v-else>自动计算</span>
        </div>
      </div>
    </template>
    <!-- 图片、附件 -->
    <div v-if="['image', 'file'].includes(formItem.type)">
      <div :class="{ 'item-required': formItem.setting.required }">
        {{ formItem.setting.name }}
      </div>
      <div class="upload">
        <PlusOutlined />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "@vue/runtime-core";
import { PlusOutlined, RightOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "FormShow",
  props: {
    current: {
      type: Object,
      default: () => ({}),
    },
  },
  components: { PlusOutlined, RightOutlined },
  setup(props, { emit }) {
    const state = reactive({
      formItem: [],
    });

    const init = () => {
      state.formItem = props.current;
    };

    init();
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.placeholder {
  color: #999;
}
.upload {
  width: 48px;
  height: 48px;
  background: #f4f4f4;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 4px 0;
}
.item-required {
  &::before {
    content: "*";
    color: @error-color;
    margin-right: 2px;
  }
}
.combine-item {
  padding: 8px 0px;
}
</style>
